<template>
    <div class="furnace">
        <!-- 炉顶温度监测 -->
        <div class="box">
            <div class="titles1">
                炉顶温度监测
            </div>
            <!-- 链接状态 -->
             
               <div class="pub">
                    <div class="status_f">
                        <div class="ones">
                            <img src="@/assets/img/ic_she@2x.png" alt="">
                            <div>
                                <h3 class="biao" > {{  topDate.name }} </h3>
                                <p>设备名称</p>
                            </div>
                        </div>
                        <div class="ones">
                            <img v-if="topDate.name" src="@/assets/img/ic_lian@2x.png" alt="">
                            <img v-else src="@/assets/img/ic_lian_dis@2x.png" alt="">
                            <div>
                                <h3>
                                    <span class="sp1" v-if="topDate.name">正常</span>
                                    <span class="sp2" v-else>离线</span>
                                </h3>
                                <p>链接状态</p>
                            </div>
                        </div>
                        <div class="ones">
                            <img v-if="topDate.name" src="@/assets/img/ic_zhuang@2x.png" alt="">
                            <img v-else src="@/assets/img/ic_zhuang_dis@2x.png" alt="">
                            <div>
                                <h3>
                                    <span class="sp1" v-if="topDate.name">正常</span>
                                    <span class="sp2" v-else>未工作</span>
                                </h3>
                                <p>设备状态</p>
                            </div>
                        </div> 
                    </div> 
                </div> 
            <!-- 炉顶实时温度 -->
            <div class="temper">
                <div class="img">
                    <h3>{{ Math.round(topDate.temp) }} <span>℃</span></h3>
                </div>
                <p class="gradient-text">炉顶实时温度</p>
            </div>
            <!-- 温度曲线  -->
            <div class="curve">
                <div class="title">
                    <span></span>
                    12小时变化温度曲线（ ℃ ）
                </div>
                <!-- 曲线图 -->
                <div class="temper_curve">
                    <Chart></Chart>
                </div>
            </div>

        </div>

    </div>
</template>
<script lang="ts" setup>
import Chart from './chart.vue'; 
import { storeToRefs } from 'pinia' 
import { ref,  onMounted,onUnmounted } from 'vue'
import useMainStore from '@/store/main/main'
const systemStore = useMainStore() 
// systemStore.fetchEntireDateActive()
const { topDate } = storeToRefs(systemStore)

// 图片刷新
function refreshImageUrl () {
    systemStore.fetchEntireDateActive()
};
let intervalId = ref(null)
onMounted(() => {  
    // intervalId = setInterval(refreshImageUrl, 5000);
    // 清理定时器
});
onUnmounted(() => {
    clearInterval(intervalId);
});

</script>


